import { useState } from "react";
import viteLogo from "/vite.svg";
import reactLogo from "../../assets/react.svg";

function DemoPage() {
  const [count, setCount] = useState(0);

  return (
    <div className="container mx-auto p-8 min-h-screen flex flex-col items-center justify-center">
      <div className="flex gap-8 mb-8">
        <a href="https://vite.dev" target="_blank" rel="noreferrer">
          <img src={viteLogo} className="h-24 w-24 animate-ping" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank" rel="noreferrer">
          <img src={reactLogo} className="h-24 w-24 animate-spin" alt="React logo" />
        </a>
      </div>
      <h1 className="text-4xl font-bold mb-8 text-primary">Vite + React</h1>
      <div className="card w-96 bg-base-100 shadow-sm p-6">
        <button type="button" className="btn btn-primary w-full" onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p className="mt-4 text-base-content">
          Edit <code className="bg-base-200 p-1 rounded">src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="mt-8 text-sm text-base-content read-the-docs">Click on the Vite and React logos to learn more</p>
    </div>
  );
}

export default DemoPage;
